<template>
    <div id="com-container">
        <div
            :id="
                $route.path === '/index'
                    ? 'center-bottom-container-index'
                    : 'center-bottom-container'
            "
            ref="box"
        ></div>
    </div>
</template>

<script>
import { CropCoverage } from '../request/api';
import chinaMap from '../assets/china.json';
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            myChart: null
        };
    },
    computed: {
        ...mapGetters({
            theme: 'theme'
        })
    },
    watch: {
        theme() {
            this.myChart.off('dblclick')
            this.myChart.dispose()
            this.initCharts()
            this.getData()
            this.changeCharts()
            this.dblClick()
        }
    },
    mounted() {
        this.initCharts()
        this.getData()
        window.addEventListener('resize', () => {
            this.changeCharts()
        })
        this.changeCharts()
        this.dblClick()
    },

    methods: {
        dblClick() {
            this.myChart.getZr().on('dblclick', () => {
                if (this.$route.path === '/index') {
                    this.$router.push('/centerbottom')
                } else {
                    this.$router.push('/index')
                }
            });
        },
        initCharts() {
            this.$echarts.registerMap("china", { geoJSON: chinaMap });
            this.myChart = this.$echarts.init(this.$refs.box, this.theme)
            let option = {
                title: {
                    text: '各地区农作物覆盖面积',
                    top: '10px',
                    left: '20px'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return params.name;//自行定义formatter格式
                    }
                },
                visualMap: {
                    min: 0,
                    max: 500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'],//取值范围的文字
                    inRange: {
                        color: ['#5fa4d9', '#052b47']//取值范围的颜色
                    },
                    show: true,//图注
                    calculable: true
                },
                geo: {
                    map: 'china',
                    roam: false,//不开启缩放和平移
                    zoom: 1.2,//视角缩放比例,
                    center: [105.97, 30.71],
                    label: {
                        normal: {
                            show: false,
                            fontSize: '10',
                            color: 'rgba(0,0,0,0.7)'
                        },
                        emphasis: {
                            textStyle: {
                                color: this.theme === 'dark' ? '#fff' : '#333'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis: {
                            areaColor: '#134871',//鼠标选择区域颜色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                series: [{
                    // name: '',
                    type: 'map',
                    geoIndex: 0,
                }]
            }
            this.myChart.setOption(option);
        },
        async getData() {
            let res = await CropCoverage()
            let arr = res.content.map(item => {
                delete item.id
                return item
            })
            let mainPlants = 0
            res.content.forEach(item => {
                mainPlants += item.value
            })
            this.setCharts(arr, mainPlants)

        },
        setCharts(arr, mainPlants) {
            let option = {
                title: {
                    subtext: mainPlants + '万亩',
                    subtextStyle: {
                        color: this.theme === 'dark' ? '#fff369' : '#ffa400'
                    }
                },
                series: [
                    {
                        type: 'map',
                        data: arr
                    }
                ]
            }
            this.myChart.setOption(option);
        },
        // 4、图表适配
        changeCharts() {
            let width = this.$refs.box.offsetWidth / 100
            let fontSize = this.$route.path === '/index' ? width * 3 : width * 3
            this.myChart.resize()
            let option = {
                title: {
                    textStyle: {
                        fontSize
                    }
                }
            }
            this.myChart.setOption(option);
        }
    },
};
</script>

<style scoped>
#center-bottom-container-index {
    width: 96%;
    height: 93%;
    margin: auto;
    border: 1px solid #38c5ec;
}
#center-bottom-container {
    width: 100%;
    height: 100%;
}
</style>
